<template>
  <div class="itemLists">
    <div class="top">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="4">
          <el-button type="warning" @click="enterAddItem" size="small">
            新增商品
            <i class="el-icon-circle-plus"></i>
          </el-button>
        </el-col>
        <el-col :span="4">
          <download-excel :fields="field" name="商品表" :data="items">
            <el-button type="success" size="small">
              导出为excel
              <i class="el-icon-download"></i>
            </el-button>
          </download-excel>
        </el-col>
      </el-row>
    </div>
    <!-- 表格展示列表数据 -->
    <el-table  :data="items" style="width: 100%; margin-top: 20px">
      <el-table-column prop="title" label="商品标题"></el-table-column>
      <el-table-column prop="desc" label="描述">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="bottom-start">
            <div slot="content" style="width: 300px">{{ scope.row.desc }}</div>
            <span>
              {{ scope.row.desc.substr(0, 15) + "..." }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="sale" label="销量">
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            :color="scope.row.sale > 500 ? '#F56C6C' : '#67C23A'"
          >
            {{ scope.row.sale }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="onoff" label="上下架">
        <template slot-scope="scope">
          <el-switch :value="scope.row.onoff === 1 ? true : false" />
          {{ scope.row.onoff === 1 ? "上架" : "下架" }}
        </template>
      </el-table-column>
      <el-table-column prop="thumb" label="封面">
        <template slot-scope="scope">
          <img :src="scope.row.thumb" width="100" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="createAt" label="上架时间">
        <template slot-scope="scope">
          {{ formatData(scope.row.createAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="enterItemUpdate(scope.row.id)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="delItem(scope.row.id)"
            type="danger"
            size="small"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- / 表格展示列表数据-->
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next, sizes"
      :page-sizes="[10, 50, 100, 200, 300, 400]"
      :page-size="10"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    >
    </el-pagination>
    <!-- /分页 -->
  </div>
</template>

<script>
import { fetchItems, delItem } from '_api'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      // 商品列表数据
      items: [],
      total: 0,
      page: 1,
      pageSize: 10,
      // 导出excel的表头
      field: {
        id: 'id',
        标题: 'title',
        价格: 'price',
        描述: 'desc',
        销量: 'sale',
        上下架: 'onoff',
        封面: 'thumb',
        创建时间: 'createAt',
        内容: 'content'
      }

    }
  },
  mounted () {
  },
  methods: {
    delItem (id) {
      // 删除商品
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        // 发送请求删除商品
        delItem(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              onClose: () => {
                this.$router.go(0)
              }
            })
          }
        })
      })
    },
    enterItemUpdate (id) {
      // 点击进入编辑商品页
      this.$router.push({
        path: '/itemUpdate',
        query: {
          id
        }
      })
      this.$store.commit('nav/setTabs', {
        name: '更新商品',
        path: '/itemUpdate'
      })
    },
    enterAddItem () {
      // 点击进入增加商品
      this.$router.push('/itemAdd')
      // 将增加商品 路由 增加到tab中
      this.$store.commit('nav/setTabs', {
        name: '增加商品',
        path: '/itemAdd'
      })
    },
    sizeChange (pageSize) {
      // 点击改变 分页 一页显示 条数
      this.pageSize = pageSize
      // 重新请求
      this.fetchItems()
    },
    pageChange (page) {
      // 点击改变 当前页
      this.page = page
      // 重新请求
      this.fetchItems()
    },
    formatData (n) {
      return dayjs(n).format('YYYY-MM-DD HH:mm:ss')
    },
    fetchItems () {
      // 请求商品列表
      fetchItems({
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        if (res.data.code === 200) {
          this.items = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    }
  },
  created () {
    this.fetchItems()
  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 400px;
}
</style>
